<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">

</head>
<body>

<div class="box">
    <ul>
        <li>
            <a href=""><img src="../../components/image/教师中心%20-%20轮播图/img1.png" alt=""></a>
        </li>
        <li>
            <a href=""><img src="../../components/image/教师中心%20-%20轮播图/img2.png" alt=""></a>
        </li>
    </ul>
    <div class="left">&lt;</div>
    <div class="right">&gt;</div>
    <div class="pointer">
        <span class="s1 s2"></span>
        <span class="s1"></span>
    </div>
</div>
<script>

    let current = 0;
    let ul = document.querySelector(".box>ul")
    let leftDOM = document.getElementsByClassName("left")[0]
    let rightDOM = document.getElementsByClassName("right")[0]
    let width_step = ul.getElementsByTagName("li")[0].offsetWidth;
    let count = ul.getElementsByTagName("li").length
    let points = document.querySelectorAll(".pointer>span")
    function pre() {
        points[current].classList.remove("s2")
        current--
        if (current < 0) current = count - 1;

        points[current].classList.add("s2")
        ul.style.left = - current * width_step + "px"

    }
    function next() {
        points[current].classList.remove("s2")
        current++
        if (current > count - 1) current = 0;

        points[current].classList.add("s2")
        ul.style.left = - current * width_step + "px"
    }
    leftDOM.onclick = pre;
    rightDOM.onclick = next;




</script>

</body>
</html>